<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>添加银行卡</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" href="../../css/public-heder-Reset.css">
	<link rel="stylesheet" type="text/css" href="../../css/U-addBank.css">
</head>
<body>
	<div class="page-box">
		<!-- header -->
		<header class="page-header">
			<a href="Uaccount.html" class="back"></a>
			<p class="pege-name">添加银行卡</p>
		</header>
		<div class="liubai"></div>
		<!-- header /-->
		<div class="bankBox">
			<div class="show">
				<input placeholder="请选择银行"  id="Ba" readonly="readonly">
				<div class="icon"></div>
				<div class="choiceBank">
					<ul>
						<li class="Card-Number ">
							<div class="bank BOC">BOC</div>
							<div class="bankDetails">
								<p class="bankname">中国银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>		
						</li>
						<li class="Card-Number ">
							<div class="bank ABC">ABC</div>
							<div class="bankDetails">
								<p class="bankname">中国农业银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank CCB">CCB</div>
							<div class="bankDetails">
								<p class="bankname">中国建设银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank ICBC">ICBC</div>
							<div class="bankDetails">
								<p class="bankname">中国工商银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank CITIC">CITIC</div>
							<div class="bankDetails">
								<p class="bankname">中信银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank CMBC">CMBC</div>
							<div class="bankDetails ">
								<p class="bankname">中国民生银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank GDB ">GDB</div>
							<div class="bankDetails ">
								<p class="bankname">广发银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank CIB ">CIB</div>
							<div class="bankDetails ">
								<p class="bankname">兴业银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank CEB ">CEB</div>
							<div class="bankDetails ">
								<p class="bankname">中国光大银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank BOS ">BOS</div>
							<div class="bankDetails ">
								<p class="bankname">上海银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank PSBC ">PSBC</div>
							<div class="bankDetails ">
								<p class="bankname">中国邮政储蓄银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank HXB ">HXB</div>
							<div class="bankDetails ">
								<p class="bankname">华夏银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank SZPAB ">SZPAB</div>
							<div class="bankDetails ">
								<p class="bankname">平安银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank SPDB ">SPDB</div>
							<div class="bankDetails ">
								<p class="bankname">上海浦东发展银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank CMB ">CMB</div>
							<div class="bankDetails ">
								<p class="bankname">招商银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank BCCB ">BCCB</div>
							<div class="bankDetails ">
								<p class="bankname">北京银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank EGBANK ">EGBANK</div>
							<div class="bankDetails ">
								<p class="bankname">恒丰银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank CZB ">CZB</div>
							<div class="bankDetails ">
								<p class="bankname">浙商银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank CBHB ">CBHB</div>
							<div class="bankDetails ">
								<p class="bankname">渤海银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number ">
							<div class="bank SHRCB ">SHRCB</div>
							<div class="bankDetails ">
								<p class="bankname">上海农商银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
						<li class="Card-Number">
							<div class="bank COMM ">COMM</div>
							<div class="bankDetails ">
								<p class="bankname">交通银行</p>
								<p class="requirement"> 最高单笔10万，单日50万，单月限额50万</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="show">
				<input placeholder="请选择银行省份" id="pv" readonly="readonly">
				<div class="icon"></div>
				<div class="choiceBank">
					<ul class="provinceBox">
						<li class="province">北京市</li>
						<li class="province">天津市</li>
						<li class="province">上海市</li>
						<li class="province">重庆市</li>
						<li class="province">河北省</li>
						<li class="province">山西省</li>
						<li class="province">辽宁省</li>
						<li class="province">吉林省</li>
						<li class="province">黑龙江省</li>
						<li class="province">江苏省</li>
						<li class="province">浙江省</li>
						<li class="province">安徽省</li>
						<li class="province">福建省</li>
						<li class="province">江西省</li>
						<li class="province">山东省</li>
						<li class="province">河南省</li>
						<li class="province">湖北省</li>
						<li class="province">湖南省</li>
						<li class="province">广东省</li>
						<li class="province">海南省</li>
						<li class="province">四川省</li>
						<li class="province">贵州省</li>
						<li class="province">云南省</li>
						<li class="province">陕西省</li>
						<li class="province">甘肃省</li>
						<li class="province">青海省</li>
						<li class="province">台湾省</li>
						<li class="province">广西壮族自治区</li>
						<li class="province">内蒙古自治区</li>
						<li class="province">西藏自治区</li>
						<li class="province">宁夏回族自治区</li>
						<li class="province">新疆维吾尔自治区</li>
						<li class="province">香港特别行政区</li>
						<li class="province">澳门特别行政区</li>
					</ul>
				</div>
			</div>
			<div class="show">
				<input placeholder="请选择银行城市" id="cv" readonly="readonly">
				<div class="icon"></div>
				<div class="choiceBank">
					<ul class="city"></ul>
				</div>
			</div>
			<div>
				<input placeholder="请输入开户行卡号" id="zh" />
			</div>
			<div>
				<input placeholder="请输入预留手机号" id="ph" />
			</div>
			<div>
				<input placeholder="请输入验证码" id="co" class="eliminate" />
				<em class="phoneCode">获取验证码</em>
			</div>
		</div>
		<div class="submit-btn">
			<button type="submit" disabled="disabled">添加银行卡</button>
		</div>	
	</div>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/http-url.js"></script>
<script type="text/javascript">
		function text(name){
	        $('#cv').val($(name).text());
	        $(name).parents(".choiceBank").hide();
		}
	$(function(){
		var china=new Object();
			china['北京市']=new Array('北京市');
			china['上海市']=new Array('上海市');
			china['天津市']=new Array('天津市');
			china['重庆市']=new Array('重庆市');
			china['河北省'] = new Array('石家庄', '唐山市', '邯郸市', '秦皇市岛', '保市定', '张家市口', '承德市', '廊坊市', '沧州市', '衡水市', '邢台市');
			china['山西省']=new Array('太原市','大同市','阳泉市','长治市','晋城市','朔州市','晋中市','运城市','忻州市','临汾市','吕梁市');
			china['辽宁省']=new Array('沈阳市','大连市','鞍山市','抚顺市','本溪市','丹东市','锦州市','营口市','阜新市','辽阳市','盘锦市','铁岭市','朝阳市','葫芦岛市');
			china['吉林省']=new Array('长春市','吉林市','四平市','辽源市','通化市','白山市','松原市','白城市','延边州','长白山管委会');
			china['黑龙江省']=new Array('哈尔滨市','齐齐哈尔市','大庆市','佳木斯市','牡丹江市','七台河市','双鸭山市','黑河市','鸡西市','伊春市','绥化市','鹤岗市','加格达奇市');
			china['江苏省']=new Array('南京市','苏州市','无锡市','常州市','南通市','扬州市','镇江市','泰州市','盐城市','连云港市','宿迁市','淮安市','徐州市');
			china['浙江省']=new Array('杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市','衢州市','舟山市','台州市','丽水市');
			china['安徽省']=new Array('合肥市','芜湖市','蚌埠市','淮南市','马鞍山市','淮北市','铜陵市','安庆市','黄山市','滁州市','阜阳市','宿州市','巢湖市','六安市','亳州市','池州市','宣城市');
			china['福建省']=new Array('福州市','厦门市','莆田市','三明市','泉州市','漳州市','南平市','龙岩市','宁德市');
			china['江西省']=new Array('南昌市','景德镇市','萍乡市','九江市','新余市','鹰潭市','赣州市','吉安市','宜春市','抚州市','上饶市');
			china['山东省']=new Array('济南市','青岛市','淄博市','枣庄市','东营市','烟台市','潍坊市','济宁市','泰安市','威海市','日照市','莱芜市','临沂市','德州市','聊城市','滨州市','菏泽市');
			china['河南省']=new Array('郑州市','开封市','洛阳市','平顶山市','安阳市','鹤壁市','新乡市','焦作市','濮阳市','许昌市','漯河市','三门峡市','南阳市','商丘市','信阳市','周口市','驻马店市');
			china['湖北省']=new Array('武汉市','黄石市','十堰市','荆州市','宜昌市','襄樊市','鄂州市','荆门市','孝感市','黄冈市','咸宁市','随州市');
			china['湖南省']=new Array('长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','益阳市','郴州市','永州市','怀化市','娄底市');
			china['广东省']=new Array('广州市','深圳市','珠海市','汕头市','韶关市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市');
			china['海南省']=new Array('文昌市','琼海市','万宁市','五指山市','东方市','儋州市');
			china['四川省']=new Array('成都市','自贡市','攀枝花市','泸州市','德阳市','绵阳市','广元市','遂宁市','内江市','乐山市','南充市','眉山市','宜宾市','广安市','达州市','雅安市','巴中市','资阳市');
			china['贵州省']=new Array('贵阳市','六盘水市','遵义市','安顺市');
			china['云南省']=new Array('昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市');
			china['陕西省']=new Array('西安市','铜川市','宝鸡市','咸阳市','渭南市','延安市','汉中市','榆林市','安康市','商洛市');
			china['甘肃省']=new Array('兰州市','金昌市','白银市','天水市','嘉峪关市','武威市','张掖市','平凉市','酒泉市','庆阳市','定西市','陇南市');
			china['青海省']=new Array('西宁市');
			china['台湾省'] = new Array('台北市','高雄市','基隆市','台中市','台南市','新竹市','嘉义市');
			china['广西壮族自治区']=new Array('南宁市','柳州市','桂林市','梧州市','北海市','防城港市','钦州市','贵港市','玉林市','百色市','贺州市','河池市','来宾市','崇左市');
			china['内蒙古自治区']=new Array('呼和浩特市','包头市','乌海市','赤峰市','通辽市','鄂尔多斯市','呼伦贝尔市','巴彦淖尔市','乌兰察布市'); 
			china['西藏自治区']=new Array('拉萨市');
			china['宁夏回族自治区']=new Array('银川市','石嘴山市','吴忠市','固原市','中卫市');
			china['新疆维吾尔自治区']=new Array('乌鲁木齐市','克拉玛依市');
			// china['香港特别行政区']=new Array('高雄市','基隆市','台中市','台南市','新竹市','嘉义市');
		var bankcode,bankname,province,phone;
		$('.show input').click(function(){
			$('.choiceBank').hide();
			$(this).parents(".show").find('.choiceBank').show();
		})
		$('.Card-Number').click(function(){
			$('.choiceBank').hide();
			bankcode=$(this).find('.bank').text();
			bankname=$(this).find('.bankname').text();
			$('#Ba').val(bankname)
			return false
		});
		$('.province').on("click",function(){
			$('.city').html('');
			var conten='';
			$('.choiceBank').hide();
			province=$(this).text();
			$('#pv').val(province);
			for(var i=0 ; i<china[province].length; i++){
				conten += '<li class="aa" onclick="text(this)" >'+china[province][i]+'</li>';
			}
			$(conten).appendTo('.city');
			return false
		});
		// 验证输入信息不能为空
		$('.phoneCode').click(function(){
			// 判断是否获取过
			if(isClick){
				return ;
			}
			var province,city,cate,card,phone_number;
			province=$('#pv').val();
			city=$('#cv').val();
			card=$('#zh').val();
			phone_number=$('#ph').val().trim();
			var UserData={'province':province,'city':city,'bankcode':bankcode,'card':card,'phone_number':phone_number}
			if(!$('#Ba').val()){
				promptBox('请选择银行');
				return
			}else if (!$('#pv').val()) {
				promptBox('请选择省份');
				return
			}else if (!$('#cv').val()) {
				promptBox('请选择城市');
				return
			}else  if (!$('#zh').val()) {
				promptBox('请输入银行卡号码');
				return
			}else if(!reg.test(phone_number)){
				promptBox('请输入正确的手机号');
				return
			};
			$('.phoneCode').css({"color":"#ccc","borderColor":"#ccc"});
				// 	//调用定时函数 设定剩余时间  名字 提示字符串 原本字符串 改变颜色
			timer(60,".phoneCode","秒后失效","获取验证码","#6eba6f");
			isClick=true
			ajaxRequest('/api/user/bb/card/',UserData,function(data){
				
			},false)
		});
		// 验证输入信息是够符合规则；
		$('input').on('keyup',function(){
			var province,city,card,phone_number,code;
			province=$('#pv').val();
			city=$('#cv').val();
			card=$('#zh').val();
			phone_number=$('#ph').val().trim();
			code=$('#co').val().trim();
			if (bankname && province && city && card && reg.test(phone_number) && code) {
				sureSubmit()
			}else{
				cannotSubmit()
			}
		})
		$('.submit-btn button').click(function(){
			submitOk()
			var code=$('#co').val().trim();
			var UserData={'code':code};
			ajaxRequest('/api/user/bb/card/do/',UserData,function(data){
				
			},false)
		})
	});
</script>
</body>
</html>
